// 验证码组件封装
// 验证码是调用的第三方插件，随机产生图片路径，由后端调用，并返回给前端
// 所以需要进行接口调用

import React from 'react';
// 引入axios
import axios from 'axios'
// 模拟生命周期，保存组件状态，函数组件通过ref调用子组件的数据和方法
import {useEffect,useState,useImperativeHandle,forwardRef} from 'react'
import Pts from 'prop-types';

const Captcha = forwardRef((props,ref) => {
    // 定义数据，解决函数组件无状态的问题
    const [imgurl,setimgurl] = useState('')
    // 生命周期,只有初始化执行
    useEffect(()=>{
        getImg()
    },[])
    // 调用后端接口
    const getImg=()=>{
        // 直接调用，具体看接口文档
        axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res=>{
            if(res.status==200){
                setimgurl(res.data.img)
                //将后端返回的验证码对应的唯一的key
                // 保存在父组件中,这样不会导致第二个验证码组件复用的时候,
                //第二次返回的key 覆盖第一次返回的key 
                // 通过子传父的方式, 将key传递给父组件
                props.saveKey(res.data.key)
                console.log(res.data.key,'图形验证码')
            }
        })
    }
    // 定义点击刷新事件,重新调用
    const changeFn = ()=>{
        getImg()
    }
    // 因为函数组件的父组件不能直接通过ref访问到子组件，所以用这个hook函数抛出下
    useImperativeHandle(ref, () => { return { changeFn } })
    return (
        <div>
            <img src={imgurl} onClick={changeFn} width={props.w} height={props.h}/>
        </div>
    );
})

// 属性约束
Captcha.propTypes = {
    saveKey: Pts.func.isRequired,
    w: Pts.number,
    h: Pts.number
}

// 设置属性默认值
Captcha.defaultProps = {
    w: 140,
    h: 40
}

export default Captcha;
